<template>
    <view class="bg-content">
        <view class="u-wrap">
            <view class="u-menu-wrap">
                <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
                    <view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current === index ? 'u-tab-item-active' : '']"
                          :data-current="index" @tap.stop="swichMenu(index)">
                        <text style="padding: 12px; line-height: 1.5; text-align: center; width: 85px;">{{item.name}}</text>
                    </view>
                </scroll-view>
                <block>
                    <scroll-view scroll-y class="right-box">
                        <view class="page-view">
                            <div>
                                <goodsList ref="goodsListRef" v-if="goodsListFilterParams.storeClassId" :showType="'1'"
                                           :goodsListFilterParams="goodsListFilterParams"></goodsList>
                            </div>
                        </view>
                    </scroll-view>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
    import goodsList from '@/components/goods-list.vue'
    import {TbStoreClassService} from "@/dev/services/tb-store-class.service";

    export default {
        data() {
            return {
                tabbar: [],
                scrollTop: 0, //tab标题的滚动条位置
                current: 0, // 预设当前项的值
                menuHeight: 0, // 左边菜单的高度
                menuItemHeight: 0, // 左边菜单item的高度

                goodsListFilterParams: {
                    _timestamp: new Date().getTime(),
                    communityId: this.globalVariable.userInfo.tbCommunity.id,
                    searchKeyword: null,
                    storeClassId: null,
                    orderBy: 'salesvolume desc'
                }
            }
        },
        components: {
            goodsList,
        },
        mounted() {
            const _self = this;
            _self.init();
        },
        methods: {
            init() {
                const _self = this;
                // 如果还没选客户，则先选择客户。
                if (_self.globalVariable.userInfo.tbCommunityUser.type === "0" && !_self.globalVariable.userInfo.tbCommunityUserType) {  // type=0业务员，1-客户
                    console.log(_self.globalVariable.userInfo)
                    uni.redirectTo({
                        url: '/pages/common/login-community-user-select/index'
                    });
                } else {
                    // new TbGoodsClassService().findTbGoodsClassList({
                    //     storeId: this.globalVariable.userInfo.tbCommunityUser.adminStore.id,
                    //     status: '1'
                    // }).then(result => {
                    //     console.log(result);
                    //     _self.tabbar = result;
                    //     _self.goodsListFilterParams.goodsClassId = _self.tabbar[_self.current].id;
                    //     _self.$forceUpdate();
                    // });
                    new TbStoreClassService().findList({
                        communityId: this.globalVariable.userInfo.tbCommunity.id,
                        grade: 2,
                        status: '1',
                        deleted: 0,
                        orderBy: 'display_order asc',
                        returnKeys: 'id,name'
                    }).then(result => {
                        console.log(result);
                        _self.tabbar = result;
                        _self.goodsListFilterParams.storeClassId = _self.tabbar[_self.current].id;
                        _self.$forceUpdate();
                    })
                }
            },
            // 上拉加载
            loadMore: function () {
                console.log(this.$refs.goodsListRef);
                if (this.$refs.goodsListRef.pagination.hasNextPage) {
                    this.$refs.goodsListRef.doInfinite();
                }
            },
            // 点击左边的栏目切换
            async swichMenu(index) {
                if (index === this.current) return;
                this.current = index;
                console.log(this.goodsListFilterParams);
                this.goodsListFilterParams.storeClassId = this.tabbar[this.current].id;

                // 如果为0，意味着尚未初始化
                if (this.menuHeight === 0 || this.menuItemHeight === 0) {
                    await this.getElRect('menu-scroll-view', 'menuHeight');
                    await this.getElRect('u-tab-item', 'menuItemHeight');
                }
                // 将菜单菜单活动item垂直居中
                this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
            },
            // 获取一个目标元素的高度
            getElRect(elClass, dataVal) {
                new Promise((resolve, reject) => {
                    const query = uni.createSelectorQuery().in(this);
                    query.select('.' + elClass).fields({size: true}, res => {
                        // 如果节点尚未生成，res值为null，循环调用执行
                        if (!res) {
                            setTimeout(() => {
                                this.getElRect(elClass);
                            }, 10);
                            return;
                        }
                        this[dataVal] = res.height;
                    }).exec();
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "./index.scss";
</style>
